<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="" alt="" id="hTen">
        <img src="" alt="" id="hGe">:
        <img src="" alt="" id="mTen">
        <img src="" alt="" id="mGe">:
        <img src="" alt="" id="sTen">
        <img src="" alt="" id="sGe">
    </div>

    <script>
        //获取时间
         var time1 = new Date()
         renden(time1)

         //定时器刷新时间
         setInterval(function(){
            var time1 = new Date()
         renden(time1)
         },1000)

         function renden(time1){
             //获取时间的时分秒
             var h = time1.getHours()
             var m = time1.getMinutes()
             var s = time1.getSeconds()


             //小时
             var h1 = h >= 10 ? parseInt(h / 10) : 0
             var h2 = h >= 10 ? h % 10 : h
             hTen.src= 'img/' + h1 + '.png'
             hGe.src= 'img/' + h2 + '.png'

             //分钟
             var m1 = m >= 10 ? parseInt(m / 10) : 0
             var m2 = m >= 10 ? m % 10 : m
             mTen.src= 'img/' + m1 + '.png'
             mGe.src= 'img/' + m2 + '.png'

             //秒钟
             var s1 = s >= 10 ? parseInt(s / 10) : 0
             var s2 = s >= 10 ? s % 10 : s
             sTen.src= 'img/' + s1 + '.png'
             sGe.src= 'img/' + s2 + '.png'
         }
    </script>
</body>
</html>